<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
          <template #default="{ filterForm, handleQuery }">
            <el-col :span="4" style="text-align: right">
              <el-form-item label="单元名称">
                <el-input v-model="filterForm.unitName"></el-input>
              </el-form-item>
            </el-col>
          </template>
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd"
              >新增</el-button
            >
          </el-col>

          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
        >
          <template #beforewhetherDanger>
            <el-table-column
              label="公司"
              prop="deptParentName"
              align="center"
              width="200"
              key="deptParentName"
            >
            </el-table-column>
            <el-table-column
              label="部门"
              prop="deptName"
              align="center"
              width="200"
              key="deptName"
            >
            </el-table-column>
            <el-table-column
              label="处置方案名称"
              prop="planName"
              width="250"
              align="center"
              key="planName"
            >
            </el-table-column>
            <el-table-column
              label="监控点名称"
              width="250"
              prop="monitorPointName"
              align="center"
              key="monitorPointName"
            >
            </el-table-column>
          </template>
          <template #actionButton="{ row }">
            <el-button
              type="text"
              v-if="row.enable == '启用'"
              @click="handleEnble(row, '停用')"
              style="color: red"
              >停用</el-button
            >
            <el-button type="text" v-else @click="handleEnble(row, '启用')"
              >启用</el-button
            >

            <el-button type="text" icon="Edit" @click="handleEdit(row)"
              >修改</el-button
            >

            <el-button
              type="text"
              icon="Delete"
              style="color: red"
              @click="handleDel(row)"
              >删除</el-button
            >
          </template></Table
        >
        <DialogVform
          :formJson="formJson"
          ref="dialogVform"
          :slots="['selectUnit', 'defaultSlot']"
          @onSubmit="onSubmit"
          :title="
            dialogType == 'add' ? '新增重大危险源点位' : '修改重大危险源点位'
          "
        >
          <template #selectUnit>
            <el-form-item label="单元名称">
              <el-select @change="unitChange" v-model="form.unitId">
                <el-option
                  v-for="item in unitList"
                  :value="item.id"
                  :label="item.unitName"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template #defaultSlot>
            <el-row :gutter="12">
              <el-col :span="12">
                <el-form-item label="部门名称">
                  <el-input readonly v-model="form.deptName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联动监控点编号">
                  <el-input readonly v-model="form.monitorPointCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处置方案名称">
                  <el-input readonly v-model="form.planName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </DialogVform>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import formJson from "./components/options.json";
import { apis as DYWH } from "@/api/hdwarning/dywh/index.js";
import { apis as APIS } from "@/api/hdwarning/zdwxydw.js";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";

import { deptTreeSelect } from "@/api/system/user";
const unitList = ref([]);
const { proxy } = getCurrentInstance();

const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["dangerNodeName", "dangerLevel"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const unitChange = (val) => {
  const node = unitList.value.find((item) => item.id == val);
  if (node) {
    form.value.unitName = node.unitName || "";
    form.value.deptId = node.deptId || "";
    form.value.deptName = node.deptName || "";
    form.value.planId = node.planId || "";
    form.value.planName = node.planName || "";
    form.value.monitorPointCode = node.monitorPointName || "";
  }
};
const plugEdit = (node) => {
  console.log(node);
  form.value.unitName = node.unitName || "";
  form.value.deptId = node.deptId || "";
  form.value.deptName = node.deptName || "";
  form.value.planId = node.planId || "";
  form.value.planName = node.planName || "";
  form.value.monitorPointCode = node.monitorPointCode || "";
};
const plugAdd = () => {
  form.value = {};
};

const {
  onSubmit,
  fetchData,
  dialogType,
  handleAdd,
  handleEdit,
  getList,
  handleDel,
  queryParams,
  form,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  plugAdd,
});

onMounted(() => {
  DYWH.query({
    pageNum: 1,
    pageSize: 99999999999999999,
  }).then((response) => {
    unitList.value = response.rows;
  });
});

const handleEnble = (row, type) => {
  proxy.$modal
    .confirm(`是否确认${type}?`)
    .then(function () {
      return APIS.update({
        ...row,
        enable: type,
      });
    })
    .then(() => {
      proxy.$modal.msgSuccess("操作成功");
      getList();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
